<template>
  <div class="app-container flex-between bg-container">
    <div class="page-title">
      鞍钢镀锌生产作业看板
    </div>
    
    <div class="charts-container">
      <!-- 第一行 -->
      <div class="chart-row">
        <!-- 班组月累计产量对比图(吨) 柱状图 -->
        <div class="chart-item">
          <div class="chart-title">班组月累计产量对比图(吨)</div>
          <div class="chart-content" id="teamMonthBar"></div>
        </div>
        
        <!-- 月累计产量对比图(吨) 折线图 -->
        <div class="chart-item">
          <div class="chart-title">月累计产量对比图(吨)</div>
          <div class="chart-content" id="monthLine"></div>
        </div>
        
        <!-- 7日累计产量趋势图(吨) 折线图 -->
        <div class="chart-item">
          <div class="chart-title">7日累计产量趋势图(吨)</div>
          <div class="chart-content" id="weekTrend"></div>
        </div>
        
        <!-- 张力指标 -->
        <div class="chart-item">
          <div class="chart-title">张力指标</div>
          <div class="chart-content" id="tensionIndex"></div>
        </div>
      </div>
      
      <!-- 第二行 -->
      <div class="chart-row">
        <!-- 班组月累计产量对比图(吨) 折线图 -->
        <div class="chart-item">
          <div class="chart-title">班组月累计产量对比图(吨)</div>
          <div class="chart-content" id="teamMonthLine"></div>
        </div>
        
        <!-- 月产量回顾对比(吨) -->
        <div class="chart-item">
          <div class="chart-title">月产量回顾对比(吨)</div>
          <div class="chart-content" id="monthReview"></div>
        </div>
        
        <!-- 实时数据表 -->
        <div class="chart-item chart-table">
          <div class="chart-title">实时数据表</div>
          <div class="chart-content">
            <el-table
              :data="realTimeData"
              style="width: 100%"
              :header-cell-style="{background: 'rgba(0, 174, 255, 0.1)', color: '#00AEFF', borderColor: 'rgba(0, 174, 255, 0.3)'}"
              :cell-style="{background: 'transparent', color: '#fff', borderColor: 'rgba(0, 174, 255, 0.2)'}"
            >
              <el-table-column prop="name" label="项目" width="180"></el-table-column>
              <el-table-column prop="value1" label="数值1"></el-table-column>
              <el-table-column prop="value2" label="数值2"></el-table-column>
              <el-table-column prop="value3" label="数值3"></el-table-column>
            </el-table>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts'

export default {
  data() {
    return {
      realTimeData: [
        { name: 'A5515656NA50', value1: '0.358', value2: '1874', value3: '0' },
        { name: '项目2', value1: '0', value2: '0', value3: '0' },
        { name: '项目3', value1: '0', value2: '0', value3: '0' },
        { name: '项目4', value1: '0', value2: '0', value3: '0' },
        { name: '项目5', value1: '0', value2: '0', value3: '0' },
        { name: '项目6', value1: '0', value2: '0', value3: '0' },
        { name: '项目7', value1: '0', value2: '0', value3: '0' },
      ],
      charts: {}
    };
  },
  mounted() {
    this.$nextTick(() => {
      this.initCharts();
    });
    window.addEventListener('resize', this.handleResize);
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.handleResize);
    Object.values(this.charts).forEach(chart => {
      if (chart) chart.dispose();
    });
  },
  methods: {
    initCharts() {
      this.initTeamMonthBar();
      this.initMonthLine();
      this.initWeekTrend();
      this.initTensionIndex();
      this.initTeamMonthLine();
      this.initMonthReview();
    },
    
    // 班组月累计产量对比图(吨) - 柱状图
    initTeamMonthBar() {
      const chartDom = document.getElementById('teamMonthBar');
      if (!chartDom) return;
      this.charts.teamMonthBar = echarts.init(chartDom);
      
      const option = {
        grid: { top: 40, right: 30, bottom: 30, left: 50 },
        legend: { 
          data: ['白', '中', '夜'],
          top: 10,
          textStyle: { color: '#fff' }
        },
        xAxis: {
          type: 'category',
          data: ['2024.08', '2024.11', '2024.12', '2025.02'],
          axisLine: { lineStyle: { color: 'rgba(0, 174, 255, 0.5)' } },
          axisLabel: { color: '#fff' }
        },
        yAxis: {
          type: 'value',
          axisLine: { lineStyle: { color: 'rgba(0, 174, 255, 0.5)' } },
          axisLabel: { color: '#fff' },
          splitLine: { lineStyle: { color: 'rgba(0, 174, 255, 0.1)' } }
        },
        series: [
          {
            name: '白',
            type: 'bar',
            data: [800, 600, 700, 1200],
            itemStyle: { color: '#00AEFF' }
          },
          {
            name: '中',
            type: 'bar',
            data: [700, 500, 600, 900],
            itemStyle: { color: '#FFD700' }
          },
          {
            name: '夜',
            type: 'bar',
            data: [600, 400, 500, 800],
            itemStyle: { color: '#00FF7F' }
          }
        ]
      };
      this.charts.teamMonthBar.setOption(option);
    },
    
    // 月累计产量对比图(吨) - 折线图
    initMonthLine() {
      const chartDom = document.getElementById('monthLine');
      if (!chartDom) return;
      this.charts.monthLine = echarts.init(chartDom);
      
      const option = {
        grid: { top: 40, right: 30, bottom: 30, left: 50 },
        xAxis: {
          type: 'category',
          data: ['2024.08', '2024.09', '2024.10', '2024.11', '2024.12', '2025.01'],
          axisLine: { lineStyle: { color: 'rgba(0, 174, 255, 0.5)' } },
          axisLabel: { color: '#fff' }
        },
        yAxis: {
          type: 'value',
          max: 5000,
          axisLine: { lineStyle: { color: 'rgba(0, 174, 255, 0.5)' } },
          axisLabel: { color: '#fff' },
          splitLine: { lineStyle: { color: 'rgba(0, 174, 255, 0.1)' } }
        },
        series: [
          {
            type: 'line',
            data: [3617.50, 3611.56, 3617.50, 3617.56],
            smooth: true,
            lineStyle: { color: '#00AEFF', width: 2 },
            itemStyle: { color: '#00AEFF' },
            label: {
              show: true,
              position: 'top',
              color: '#fff',
              formatter: '{c}'
            }
          }
        ]
      };
      this.charts.monthLine.setOption(option);
    },
    
    // 7日累计产量趋势图(吨) - 折线图
    initWeekTrend() {
      const chartDom = document.getElementById('weekTrend');
      if (!chartDom) return;
      this.charts.weekTrend = echarts.init(chartDom);
      
      const option = {
        grid: { top: 40, right: 30, bottom: 30, left: 50 },
        xAxis: {
          type: 'category',
          data: ['01-08', '01-09', '01-10', '01-11', '01-12', '01-13', '01-14'],
          axisLine: { lineStyle: { color: 'rgba(0, 174, 255, 0.5)' } },
          axisLabel: { color: '#fff' }
        },
        yAxis: {
          type: 'value',
          max: 600,
          axisLine: { lineStyle: { color: 'rgba(0, 174, 255, 0.5)' } },
          axisLabel: { color: '#fff' },
          splitLine: { lineStyle: { color: 'rgba(0, 174, 255, 0.1)' } }
        },
        series: [
          {
            type: 'line',
            data: [183.03, 248.09, 185.00, 340.03, 505.00, 127.07],
            smooth: true,
            lineStyle: { color: '#00AEFF', width: 2 },
            itemStyle: { color: '#00AEFF' },
            label: {
              show: true,
              position: 'top',
              color: '#fff'
            }
          }
        ]
      };
      this.charts.weekTrend.setOption(option);
    },
    
    // 张力指标 - 条形图
    initTensionIndex() {
      const chartDom = document.getElementById('tensionIndex');
      if (!chartDom) return;
      this.charts.tensionIndex = echarts.init(chartDom);
      
      const option = {
        grid: { top: 20, right: 30, bottom: 20, left: 80 },
        xAxis: {
          type: 'value',
          max: 4000,
          axisLine: { lineStyle: { color: 'rgba(0, 174, 255, 0.5)' } },
          axisLabel: { color: '#fff' },
          splitLine: { lineStyle: { color: 'rgba(0, 174, 255, 0.1)' } }
        },
        yAxis: {
          type: 'category',
          data: ['类别十', '类别九', '类别八', '类别七', '类别六', '类别五', '类别四', '类别三', '类别二', '类别一'],
          axisLine: { lineStyle: { color: 'rgba(0, 174, 255, 0.5)' } },
          axisLabel: { color: '#fff' }
        },
        series: [
          {
            type: 'bar',
            data: [400, 800, 1200, 1500, 1800, 2200, 2500, 2800, 3200, 3500],
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                { offset: 0, color: 'rgba(0, 174, 255, 0.3)' },
                { offset: 1, color: '#00AEFF' }
              ])
            },
            barWidth: '60%'
          }
        ]
      };
      this.charts.tensionIndex.setOption(option);
    },
    
    // 班组月累计产量对比图(吨) - 折线图
    initTeamMonthLine() {
      const chartDom = document.getElementById('teamMonthLine');
      if (!chartDom) return;
      this.charts.teamMonthLine = echarts.init(chartDom);
      
      const option = {
        grid: { top: 40, right: 30, bottom: 30, left: 50 },
        legend: {
          data: ['白', '中', '夜'],
          top: 10,
          textStyle: { color: '#fff' }
        },
        xAxis: {
          type: 'category',
          data: ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12'],
          axisLine: { lineStyle: { color: 'rgba(0, 174, 255, 0.5)' } },
          axisLabel: { color: '#fff' }
        },
        yAxis: {
          type: 'value',
          max: 400,
          axisLine: { lineStyle: { color: 'rgba(0, 174, 255, 0.5)' } },
          axisLabel: { color: '#fff' },
          splitLine: { lineStyle: { color: 'rgba(0, 174, 255, 0.1)' } }
        },
        series: [
          {
            name: '白',
            type: 'line',
            data: [150, 230, 224, 218, 135, 147, 260, 180, 200, 220, 240, 280],
            smooth: true,
            lineStyle: { color: '#00AEFF', width: 2 },
            itemStyle: { color: '#00AEFF' }
          },
          {
            name: '中',
            type: 'line',
            data: [120, 200, 190, 180, 170, 160, 220, 150, 170, 190, 210, 250],
            smooth: true,
            lineStyle: { color: '#FFD700', width: 2 },
            itemStyle: { color: '#FFD700' }
          },
          {
            name: '夜',
            type: 'line',
            data: [100, 180, 170, 160, 150, 140, 200, 130, 150, 170, 190, 230],
            smooth: true,
            lineStyle: { color: '#00FF7F', width: 2 },
            itemStyle: { color: '#00FF7F' }
          }
        ]
      };
      this.charts.teamMonthLine.setOption(option);
    },
    
    // 月产量回顾对比(吨)
    initMonthReview() {
      const chartDom = document.getElementById('monthReview');
      if (!chartDom) return;
      this.charts.monthReview = echarts.init(chartDom);
      
      const option = {
        grid: { top: 40, right: 30, bottom: 30, left: 50 },
        legend: {
          data: ['2024', '2025'],
          top: 10,
          textStyle: { color: '#fff' }
        },
        xAxis: {
          type: 'category',
          data: ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12'],
          axisLine: { lineStyle: { color: 'rgba(0, 174, 255, 0.5)' } },
          axisLabel: { color: '#fff' }
        },
        yAxis: {
          type: 'value',
          max: 4000,
          axisLine: { lineStyle: { color: 'rgba(0, 174, 255, 0.5)' } },
          axisLabel: { color: '#fff' },
          splitLine: { lineStyle: { color: 'rgba(0, 174, 255, 0.1)' } }
        },
        series: [
          {
            name: '2024',
            type: 'line',
            data: [1120.56, null, null, null, null, null, null, null, null, null, null, 3617.50],
            smooth: true,
            lineStyle: { color: '#00AEFF', width: 2 },
            itemStyle: { color: '#00AEFF' },
            label: {
              show: true,
              position: 'top',
              color: '#fff',
              formatter: '{c}'
            }
          },
          {
            name: '2025',
            type: 'line',
            data: [null, null, null, null, null, null, null, null, null, null, null, 3617.50],
            smooth: true,
            lineStyle: { color: '#FFD700', width: 2 },
            itemStyle: { color: '#FFD700' },
            label: {
              show: true,
              position: 'top',
              color: '#fff',
              formatter: '{c}'
            }
          }
        ]
      };
      this.charts.monthReview.setOption(option);
    },
    
    handleResize() {
      Object.values(this.charts).forEach(chart => {
        if (chart) chart.resize();
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.app-container {
  min-height: 700px;
  height: calc(100vh - 84px);
  background-image: url('~@/assets/images/bg.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 5px 20px 20px;

  .page-title {
    font-size: 30px;
    font-weight: bold;
    color: #ffffff;
    text-align: center;
    letter-spacing: 4px;
    text-shadow: 0 0 20px rgba(0, 174, 255, 0.8),
                 0 0 40px rgba(0, 174, 255, 0.6);
    margin-bottom: 20px;
  }
  
  .charts-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 15px;
    
    .chart-row {
      flex: 1;
      display: flex;
      gap: 15px;
      
      .chart-item {
        flex: 1;
        background: rgba(0, 30, 60, 0.6);
        border: 1px solid rgba(0, 174, 255, 0.3);
        border-radius: 8px;
        padding: 10px;
        display: flex;
        flex-direction: column;
        position: relative;
        overflow: hidden;
        
        &::before {
          content: '';
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          height: 2px;
          background: linear-gradient(90deg, transparent, #00AEFF, transparent);
        }
        
        .chart-title {
          font-size: 14px;
          color: #00AEFF;
          font-weight: bold;
          margin-bottom: 10px;
          padding-left: 10px;
          position: relative;
          
          &::before {
            content: '';
            position: absolute;
            left: 0;
            top: 50%;
            transform: translateY(-50%);
            width: 4px;
            height: 14px;
            background: #00AEFF;
            border-radius: 2px;
          }
        }
        
        .chart-content {
          flex: 1;
          min-height: 0;
        }
        
        &.chart-table {
          .chart-content {
            overflow: auto;
            
            ::v-deep .el-table {
              background: transparent;
              
              &::before {
                background: transparent;
              }
              
              th, td {
                background: transparent;
                border-color: rgba(0, 174, 255, 0.2);
              }
              
              tr {
                background: transparent;
                
                &:hover > td {
                  background: rgba(0, 174, 255, 0.1) !important;
                }
              }
            }
          }
        }
      }
    }
  }

  .content-tree {
    width: 25%;
    height: 100%;
    background: var(--base-item-bg);
    margin-right: 6px;
    padding: 20px;
  }

  .content-data {
    width: calc(100% - 25% - 6px);
    height: 100%;
    background: var(--base-item-bg);
    padding: 12px 20px;

    .data-chart {
      height: 40%;
      // border: 1px solid;
    }

    .data-table {
      margin-top: 6px;
      height: calc(60% - 57px);
      // border: 1px solid;
    }

    @media screen and (max-width: 1174px) {
      .data-table {
        height: calc(60% - 107px);
      }
    }
  }
}
</style>
<style lang="scss"></style>
